<template>
    <view>
        <view class="bg grid-container">
            <view class="grid-content">
                <view
                    v-for="(categoryItem, categoryIndex) in menuList"
                    :key="categoryIndex"
                >
                    <view class="grid-content-title">
                        <view class="grid-content-title-border"></view>
                        <view class="">{{ categoryItem.name }}</view>
                    </view>
                    <view style="display: flex; flex-wrap: wrap; width: 100%;margin-top: 20rpx;">
                        <view v-for="(item, index) in categoryItem.list" :key="index" style="width: 50%;padding: 5px;box-sizing: border-box;">
                            <view class="grid-item" @click="onJump(item)">
                                <view class="grid-item-icon-box" :style="{background: item.bgColor}">
                                    <u-icon :name="item.icon" size="36" color="#fff" />
                                </view>
                                <view class="grid-item-label">{{item.name}}</view>
                                <view v-if="item.count" class="count-bar">{{ item.count > 99 ? '99+' : item.count }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import permission from "../../../utils/permission";

	export default {
        mixins: [permission],
        data() {
			return {
                categoryList: [
                    {
                        name: '功能',
                        list: [
                            {
                                name: '设备状态监控',
                                path: '/pages/monitorCenter/machineMonitor/index',
                                state: 0,
                                icon: 'order',
                                bgColor: '#ed4014',
                                count: 0,
                                pcRouterPath: ['technologyMonitor']
                            },
                            {
                                name: '生产看板',
                                path: '/subMonitoring/kanBan/index',
                                state: 0,
                                icon: 'warning',
                                bgColor: 'rgb(129, 65, 217)',
                                count: 0,
                                pcRouterPath: ['kanBan']
                            },
                            {
                                name: '温湿度监控',
                                path: '/pages/monitorCenter/temAndHum/index',
                                state: 0,
                                icon: 'hourglass-half-fill',
                                bgColor: '#2d8cf0',
                                count: 0,
                                pcRouterPath: ['temAndHum']
                            },
                            {
                                name: '订单总表',
                                path: '/subMonitoring/orderSummary/index',
                                state: 0,
                                icon: 'grid-fill',
                                bgColor: 'teal',
                                count: 0,
                                pcRouterPath: ['orderMonitorReport']
                            },
                            {
                                name: '前纺生产看板',
                                path: '/subMonitoring/subSckb/index',
                                state: 0,
                                icon: 'file-text-fill',
                                bgColor: '#f04950',
                                count: 0,
                                pcRouterPath: ['frontEmpAndMachineMonitor']
                            }
                        ]
                    }
                ],
				showWorkshop: false,
				searchParams: {
					workshopId: null,
					workshopName: null
				},
				workshopList: [],
			};
		},
		onShow() {
            this.menuList = this.getMenuListPermission(this.categoryList);
        },
		methods: {
			onJump(item) {
				wx.navigateTo({
					url: item.path + `?state=${item.state}`
				});
			}
		}
	}
</script>
<style scoped lang="scss">
@import "../../production/grid/grid";
</style>
